import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { loginout } from '../store/reducer/authSlice'

const MainMenu = () => {
  const auth = useSelector(state => state.auth)
  const dispatch  = useDispatch()
  return (
    <div>
        <ul>
            <li>
              <Link to={'/'}>主页</Link>
            </li>

            {/* 用户未登录展示这个菜单 */}
            {
              !auth.isLogged &&
              <li>
                <Link to={'/authForm'}>登录、注册</Link> 
              </li>
            }

            {/* 用户登录后展示这个菜单 */}
            {
              auth.isLogged && 
              <>
                <li>
                  <Link to={'/profile'}>用户信息：{auth.user.username}</Link> 
                </li>
                <li>
                  <Link to={'/'} onClick={() => dispatch(loginout()) }>登出</Link> 
                </li>
              </>

            }
            
        </ul>
    </div>
  )
}

export default MainMenu